iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 11

【Day 11】原子設計:常見元件 ( Text 文字、Color 色彩、Accessibility )

  • 分享至 

  • xImage
  •  

Atomic Design 五大階段:原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

  1. 文字:字級、樣式與排版
  2. 色彩:樣式與工具
  3. 為什麼要規劃通用設計 ?

1、文字 ( Text )

文字字級

rem 是網頁使用的單位,預設 1rem 等於 16px。
常在網頁程式撰寫上,考量後續的維護性,會使用 rem 的倍數關係去調整設定,定義文字字級與間距。

文字段落樣式

  • 網頁標題 ( Headline )
  • 大標 ( Title )
  • 副標 ( Subtitle )
  • 主要段落 ( Body )
  • 次要段落 ( Body Small )

網頁字型設定

若要讓使用者看到想要呈現的字型,必須要使用者的裝置內也有相同字型的檔案。

  • 系統內建字型:能得到最佳的網頁載入效能 ( 考量使用者速度體驗 )
  • 雲端字型服務
    • 免費資源:如 Google Font ( 但速度慢,中文字型少 )
    • 付費服務 ( 速度可接受,但成本較高 )

不同系統的預設字型會不想同,若要統一體驗與調性,可以設定各系統都通用的字型。
https://ithelp.ithome.com.tw/upload/images/20200926/20130402067ZOBONsJ.png

文字排版

  • 字型不超過三種 ( 避免版面凌亂,模糊品牌調性 )
  • 字種不超過三種
  • 行距要規範 ( 通常以 1.5 倍上下的字級較為舒適 )
  • 段落間距要規範

2、色彩 ( Color )

色彩能產生直觀的視覺回饋,具有提升產品一致性、呈現元件狀態或強化視覺層級等作用

色彩樣式

  • 主要色 ( Primary Color ):主要色系或用於主要元件上
  • 次要色 ( Secondary Color ):又稱作強調色,通常用於輔助元件上

好用工具網站

3、通用設計 ( Accessibility )

為什麼要規劃通用設計 ?

讓使用者在任何狀況下都能妥善瀏覽網站。創造最佳的使用者體驗,並為產品帶來最大的效益。

無障礙網頁指南 ( WCAG )

業界最常使用的標竿規範,WCAG 分為三種等級,從簡易到嚴格為:A 級、AA 級、AAA 級
在無障礙網頁指南中,設計師最需要注意的是文字與色彩的對比程度,它會影響文字的閱讀、資訊的傳遞。( 文字對比度:要達到 AA 級 )

對比度檢測工具:

https://ithelp.ithome.com.tw/upload/images/20200926/20130402LX9htb1p3m.png

好! 下一篇我們要進入原子設計的第二階段 - 分子 : )


上一篇
【Day 10】原子設計:常見元件 ( Radio Buttons & Checkbox、Links、Icon )
下一篇
【Day 12】原子設計:分子 ( 導覽元件、折疊面板、提示工具 )
系列文
UI 設計入門:SEO 尬網路行銷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言